  <service-box title="Staff Information">
    <template v-slot:header>
  <v-btn icon>
    <v-icon>fa-id-badge</v-icon>
  </v-btn>
</template>
    <v-row justify="center"
           align="center">
      <v-col cols="4"
             class="text-center">
        <v-avatar size="90px">
          <v-img :src="staffInfo.avatar" />
        </v-avatar>
      </v-col>
      <v-col cols="8">
        <div class="title">{{staffInfo.name}}</div>
        <div class="my-info-box">
          <div>
            <div class="caption">Staff Number:</div>
            <div class="subtitle-2">{{staffInfo.staffNumber}}</div>
          </div>
          <div>
            <div class="caption">Position:</div>
            <div class="subtitle-2">{{staffInfo.position}}</div>
          </div>
          <div>
            <div class="caption">Mobile:</div>
            <div class="subtitle-2">{{staffInfo.mobile}}</div>
          </div>
          <div>
            <div class="caption">Branch:</div>
            <div class="subtitle-2">{{staffInfo.branch}}</div>
          </div>
        </div>
      </v-col>
    </v-row>
  </service-box >
</template>
<script>
export default {
  data() {
    return {
      // 柜员信息
      staffInfo: {},
    };
  },
  mounted() {
    const staffInfo = this.$store.state.termina;
    this.staffInfo = staffInfo || {};
  },
};
</script>
<style scoped>
.my-info-box {
  display: flex;
  flex-wrap: wrap;
}
.my-info-box > div {
  box-sizing: border-box;
  min-width: 50%;
  padding: 4px 0;
}
</style>